<template>
	<div>
		<div class="">
			<van-form @submit="onSubmit">
				<van-field label="编号" v-model="userForm.id" readonly> </van-field>
				<van-field label="用户" v-model="userForm.name" type="text" />

				<van-field label="原来密码" v-model="userForm.password" type="password" placeholder="请输入原密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />

				<van-field label="新的密码" v-model="userForm.password2" type="password" placeholder="请输入新密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />

				<van-field label="确认密码" v-model="userForm.password22" type="password" placeholder="请输入新密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />

				<div style="margin: 16px;">
					<van-button round block type="info" native-type="submit">提交</van-button>
				</div>

			</van-form>
		</div>
	</div>
</template>

<script>
	import { showToast } from 'vant'
	import { updatePwdAPI } from "@/api/user.js";
	import { getUserLocal } from "@/utils/auth.js";
	export default {
		data() {
			return {
				userForm: {
					id: null,
					name: "",
					password: "",
					password2: "", //新的密码
					password22: "", //确认密码          
				},

				//规则:字母数字‘6~12        
				regNamePwd: /^[a-z0-9]{3,12}$/i,
			};
		},
		mounted() {
			let user = getUserLocal();
			this.userForm.id = user.id;
			this.userForm.name = user.name;
		},

		methods: {

			//处理提交保存
			onSubmit() {
				if (this.userForm.password2 != this.userForm.password22) {
					showToast("确认密码两次输入不一致");
					return;
				}

				//注意传递过去的参数user的属性名
				let user = this.userForm;
				delete user.password22; //删除该临时的字段
				updatePwdAPI(user).then(() => {
					showToast("密码更改成功！");
					this.$router.push({
						name: "user"
					});
				});
			},
		},
	};
</script>

<style lang="less" scoped>
</style>